<template>
  <Layout class="login">
    <Row class="content">
      <Col offset="9" span="6">
        <Card class="animated fadeInRight">
          <p slot="title"> {{website.title.login}} </p>
          <div class="login_aiwrap"/>
          <Form ref="loginForm" :rules="loginRules" :model="loginForm">
            <FormItem prop="username">
              <Input type="text" v-model.trim="loginForm.username" :maxlength="50" @keyup.enter.native="loginHandle"
                     :autofocus="true" prefix="ios-person-outline" placeholder="请输入登陆名称" />
            </FormItem>
            <FormItem prop="password">
              <Input :type="pwType" suffix="ios-eye-outline" v-model.trim="loginForm.password" :maxlength="20"
                     @keyup.enter.native="loginHandle" prefix="ios-lock-outline" placeholder="请输入登陆密码" >
                <Icon slot="suffix" type="md-eye" @click="changePWType"/>
              </Input>
            </FormItem>
            <FormItem prop="code" v-show="isCode">
              <Row :gutter="6">
                <Col span="16">
                  <Input type="text" v-model="loginForm.code" prefix="logo-html5" @keyup.enter.native="loginHandle"
                         placeholder="请输入验证码" />
                </Col>
                <Col span="8">
                  <img :src="codePath" alt="验证码" @click="refreshCode" class="login-code-img"/>
                </Col>
              </Row>
            </FormItem>
            <FormItem>
              <Button type="primary" long @click="loginHandle" :loading="isDisabled" >登 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 陆</Button>
            </FormItem>
          </Form>
        </Card>
      </Col>
    </Row>
  </Layout>
</template>

<script>
import { mapGetters } from 'vuex'
import store from '@/store'
export default {
    name: "Login",
    computed: {
      ...mapGetters(['website'])
    },
    data () {
      return {
        isCode: false,
        pwType:'password',
        isDisabled: false,
        loginForm: {
          username: '',
          password: ''
        },
        loginRules: {
          username: [
            { required: true, message: '请填写用户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请填写密码', trigger: 'blur' },
            { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
          ]
        }
      }
    },
    methods:{
      loginHandle () {
        console.log('loginHandle....')
        this.isDisabled = true
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            store.dispatch('LoginByUsername', this.loginForm).then(res=>{
              console.log("login success...",res)
            },
            error=>{
              console.log("login fail...",error)
            })
          } else {
            this.isDisabled = false;
          }
        })
      },
      changePWType () {
        this.pwType = this.pwType === 'password' ? 'text' : 'password'
      },
      refreshCode () {

      }
    }

}
</script>

<style lang="scss">
  @import '../../assets/css/login.scss';
</style>
